<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../common/css/insert.css">
<title>searchBook</title>
</head>
<body>
	<div id="searchInfo">
		<form id="searchBook" method="post" action="">
			<div class="form-group">
				<label>按ID搜索：</label> <input class="form-control" id="idSearch"
					type="text" name="book_id" placeholder="输入图书id">
			</div>
			<div class="form-group">
				<label>按类型搜索：</label> <input class="form-control" id="typeSearch"
					type="text" name="book_type" placeholder="输入图书类型">
			</div>
			<div class="form-group">
				<label>按书名搜索：</label> <input class="form-control" id="nameSearch"
					type="text" name="book_name" placeholder="输入书名">
			</div>
			<div class="form-group">
				<label>按作者搜索：</label> <input class="form-control" id="authorSearch"
					type="text" name="book_author" placeholder="输入作者名">
			</div>
			<div class="form-group">
				<label>按评星搜索：</label> <input class="form-control" id="starSearch"
					type="text" name="book_star" placeholder="输入星数">
			</div>

			<input class="btn btn-primary" type="button" value="搜索"
				onclick="search()"> <input class="btn btn-danger"
				type="reset" value="重置">
		</form>
	</div>
	<div id="searchResults">
	</div>
	
	
	<script>
	function search(){
		var bookid = $('#idSearch').val();
		var type = $('#typeSearch').val();
		var name=$('#nameSearch').val();
		var author =$('#authorSearch').val();
		var star=$('#starSearch').val();
		var jo = {
			"type":type,
			"name":name,
			"author":author
		};
		
		
		$(document).ready(function() {
			$.ajax({
				type : "post",
				url : "../searchBook.action",
				dataType : "json",
				data : jo,
				success : function(data,textStatus) {
					var booksArray = data.books;
					var table = document.getElementById('searchResults');
					
					var tab="<table border='1' bordercolor='blue' width='200' height='10'>";
					
					
					//循环行
					for(var i=1;i<=booksArray.length;i++)
			        {
						if(i==1){
							tab+="<tr>";
							tab+="<td>"+书籍ID+"</td>";
				       		tab+="<td>"+书籍封面+"</td>";
				       	 	tab+="<td>"+书名+"</td>";
				       		tab+="<td>"+作者+"</td>";
				       	 	tab+="<td>"+简介+"</td>";
				       		tab+="<td>"+星数+"</td>";
				       		tab+="<td>"+类型+"</td>";
				       		tab+="<td>"+评论+"</td>";
				            tab+="</tr>";
						}else{
			            	tab+="<tr>";
			            	//循环列
			            	tab+="<td>"+booksArray[i].bookid+"</td>";
			       			tab+="<td>"+booksArray[i].cover+"</td>";
			       	 		tab+="<td>"+booksArray[i].name+"</td>";
			       			tab+="<td>"+booksArray[i].author+"</td>";
			       	 		tab+="<td>"+booksArray[i].description+"</td>";
			       			tab+="<td>"+booksArray[i].star+"</td>";
			       			tab+="<td>"+booksArray[i].type+"</td>";
			       			tab+="<td>"+booksArray[i].comments+"</td>";
			            	tab+="</tr>";
						}
			        }
					
					tab+="</table>";
			       	table.innerHTML=tab;

				}
			});
		)};
	}
	</script>
</body>
</html>